<template>
  <div class='myoffer-body'>
    <p class="title">订单信息</p>
    <div class="info">
      <p v-for="(item, index) in modelData0" :key="index" :class="item.class + ' mb10'">
        <span>{{item.label}}：</span>
        <span v-if="item.isLabel" :class="item.class1||'color-999'">{{info.vo&&info.vo[item.prop]||'暂无'}}</span>
        <el-input v-if="item.hasinput" v-model="info.vo[item.prop]" :type="item.number" :placeholder="'请输入'+item.label" @blur="getSum" ></el-input>
        <span class="ml10 color-999">{{item.unit}}</span>
        <el-upload v-if="item.upload" class="ml10" name="multipartFile" :action="uploadFileUrl" :limit="1" :show-file-list="false" :on-success="handle">
          <el-button type="success" class="bc-green">上传报价文件</el-button>
        </el-upload>
      </p>
    </div>

    <p class="title mt10">求购信息</p>
    <div class="shop-info">
      <p v-for="(item, index) in modelData1" :key="index" :class="item.class">
        <span>{{item.label}}：</span>
        <img v-if="item.hasimg" :src="info.vo&&info.vo.headPic||imgs.c_logo" alt="">
        <span class="color-999">{{info.vo&&info.vo[item.prop]||'暂无'}}</span>
      </p>

      <div class="shop-goods">
        <span>求购内容：<el-button type="success" class="bc-green" @click="downloadFile">下载求购文件</el-button></span>
        
        <div class="table-box">
          <el-table :data="info.data" border style="width: 100%">
            <el-table-column v-for="(item, index) in modelData2" v-if="!item.isArray" :key="index" align="center" :label="item.label" :prop="item.prop"></el-table-column>
            <el-table-column v-else-if="item.isArray" :key="index" align="center" :label="item.label">
              <template slot-scope="scope">
                <span>{{item.isArray[scope.row[item.prop]]||"暂无"}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      
      <div class="remark mb10">
        <span>备注：</span>
        <p>
          {{info.vo.remark}}
        </p>
      </div>
      <p><span>报价时限：</span><span class="color-999">{{info.vo.timeLimit}}</span></p>
    </div>
    {{handleData}}
  </div>
</template>
<script>
import {category, quotationStatus, purchaseStatus } from '@/assets/js/commonArray.js'
export default {
  props:['data','isSubmit','ids'],
  components: {},
  name: "",
  data() {
    return {
      uploadFileUrl:PATH + "quotationManage/importQuotation.do",
      imgs:{
        c_logo:require('@/assets/imgs/center/c_logo.png'),
      },
      modelData0:[
        {prop:"quotationStatus",label:"报价状态",hasinput:false,isLabel:true},
        {prop:"price",label:"商品报价",hasinput:true,unit:"元",upload:true,type:"number"},
        {prop:"freight",label:"运费",hasinput:true,unit:"元",type:"number"},
        {prop:"taxPoint",label:"税点",hasinput:true,unit:"%",type:"number"},
        {prop:"taxation",label:"税费",isLabel:true,hasinput:false,unit:"元"},
        {prop:"transactionPeriod",label:"交易周期",hasinput:true,unit:"天",checked:true},
        {prop:"quotationTime",label:"报价时间",isLabel:true,hasinput:false,},
        {prop:"totalPrice",label:"总价",isLabel:true,hasinput:false,class:"money-count",class1:"color-red",unit:"元"},
      ],
      modelData1:[
        {prop:"askNum",label:"求购编号"},
        {prop:"status",label:"求购状态"},
        {prop:"realName",label:"买家信息",class:"logo",hasimg:true},
      ],
      modelData2:[
        {prop:"categoryId",label:"分类",isArray:category},
        {prop:"commodity",label:"品名"},
        {prop:"productName",label:"商品名称"},
        {prop:"texture",label:"材质"},
        {prop:"specification",label:"特性"},
        {prop:"quantity",label:"数量/单位"},
        {prop:"area",label:"地区"},
      ],

      info:{
        vo:{},
        data:[]
      },
      address:"",//上传文件地址
    };
  },
  watch:{
    isSubmit(){
      if(this.isSubmit){
        this.doSubmit()
      }
    }
  },
  computed:{
    /**
     * @name 处理数据
     * @returns none
     */
    handleData(){
      if(!this.data)return
      this.info.vo=this.data.vo
      this.info.vo.quotationStatus=quotationStatus[this.info.vo.quotationStatus||0]
      this.info.vo.status=purchaseStatus[this.info.vo.status||0]

      // ~未报价
      // if(true){
      //   this.modelData0.forEach(ele=>{ele.isLabel=true;ele.hasinput=false;ele.upload=false})
      // }

      this.info.data=[...this.data.data]
    },
  },
  methods: {
    /**
     * @name 上传
     */
    handle(res,file){
      _g.toMessage({status:res.status,msg:res.status==0?"成功":"失败"})
      if(res.status==0){
        this.address=res.data
      }
    },

    /**
     * @name 计算总费用
     */
    getSum(){
      let taxation = (this.info.vo.price||0)*(this.info.vo.taxPoint||0)/100
      this.$set(this.info.vo,'taxation',taxation)
      let totalPrice =Number(taxation) + Number((this.info.vo.freight||0)) + Number((this.info.vo.price||0))
      this.$set(this.info.vo,'totalPrice',totalPrice)
    },

    /**
     * @name 提交报价
     */
    doSubmit(){
      let params = {...this.info.vo}
      if(_g.checkParams(this.modelData0,params))return
      if(!this.address){
        _g.toMessage({status:1,msg:"报价文件不能为空"})
        return
      }
      //console.log(params.quotationStatus)
        params.quotationStatus  = (params.quotationStatus == "未报价" ? 0 : (params.quotationStatus == "已报价"? 1 : 2 ))
        params.status  =1
      params.fileAddress=this.address
      _g.apiPost('quotationManage/submitQuotation.do',params).then(res=>{

      })
    },

    /**
     * @name 下载求购文件
     */
    downloadFile(){
      _g.apiPost('quotationManage/downloadQuotation.do',{id:this.ids}).then(res=>{
          _g.formatFile(res,"求购明细20190226163101.xlsx")
      })
    },

  },
  created() {}
};
</script>
<style lang="scss" scoped>
.myoffer-body {
  padding: 15px;

  .title{
    border-left: 2px solid $blue;
    text-indent: 10px;
    line-height: 35px;
    margin-bottom: 5px;
  }
  .info{
    padding-left: 12px;
    font-size: 14px;

    p{
      line-height: 35px;
      display: flex;

      span:nth-child(1){
        display: inline-block;
        min-width: 70px;
        text-align: right;
      }
    }
    .money-count{
      // font-size: 20px;
      // margin: 20px 0;
    }
  }
  .shop-info{
    padding-left: 12px;
    font-size: 14px;
    >p{
      line-height: 35px;
      display: flex;
    }
    .logo{
      line-height: 36px;
      margin-bottom: 10px;

      img{
        width: 36px;
        height: 36px;
        margin-right: 10px;
      }
      span:nth-of-type(2){
        color: $blue;
        line-height: 36px;
        font-size: 18px;
      }
      .quick-video{
        margin-left: 20px;
        padding: 0 30px;
        border-radius: 30px;
      }
    }
    >div{
      display: flex;

      >p{
        flex: 1;
        overflow-wrap: break-word;
        font-size: 13px;
        color: #666;
      }
    }
    .shop-goods{display: block
    }
    .table-box{
      width: calc(100% - 70px);
      margin-left: auto;
      margin-top: 10px;
      margin-bottom: 10px;
      >span{
        display: inline-block;
        width: 70px;
      }
    }
    .remark{
      span{
        display: inline-block;
        width: 70px;
      }
    }
  }
}
</style>